<template>
  <div id="AttendingHistory">
    <el-row>
      <el-col :span="4" class="div_border_title">
        <h2>参会历史</h2>
      </el-col>
    </el-row>
    <!-- <div class="search-box">
            <el-form inline>
                <el-form-item label="预约时间">
                    <el-date-picker placeholder="选择日期" v-model="searchData.date_schedule"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="doSearch" icon="search" >查询</el-button>
                  </el-form-item>
            </el-form>
        </div> -->
    <div class="content">
      <el-table :data="boothList" border highlight-current-row fit
                :default-sort="{prop: 'date_schedule'}">
        <el-table-column type="index" :label="$t('index')" width="80" align="center"></el-table-column>
        <el-table-column prop="reservation_number" label="预约编号" align="center" width="300"></el-table-column>
        <el-table-column prop="stalls_name" label="摊位名称" align="center"></el-table-column>
        <el-table-column prop="date_schedule" label="预约排期开始日期" align="center" sortable></el-table-column>
        <el-table-column prop="date_schedule_end" label="预约排期结束日期" align="center" sortable></el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                     class="table-page-style">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { commonNotify } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { postDataToServer } from '../../assets/js/post.js'
  import SearchMenu from '../common/SearchMenu'

  export default {
    name: 'positionManagement',
    data () {
      return {
        boothList: [],
        page_no: 1,
        total: 0,
        searchData: {
          date_schedule: ''
        }
      }
    },
    created () {
      this.getBoothDataList(1)
    },
    methods: {
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      getBoothDataList (pageNum) {
        let _this = this
        let param = new Object()
        param.page_no = pageNum
        param.page_size = 20
        param.is_expired = 1
        for (let s in _this.searchData) {
          if (_this.searchData[s] !== '') {
            param[s] = _this.searchData[s]
          }
        }
        postDataToServer('STALLS_SCHEDULE_STATUS_LISTPAGE', param)
          .then((data) => {
            if (data.status === 0) {
              _this.total = data.data_list.length
              _this.boothList = data.data_list
            }
          })
      },
      doSearch (params) {
        this.getBoothDataList(params)
      }
    },
    components: {
      SearchMenu
    },
    watch: {
      page_no (val, oldVal) {
        this.getBoothDataList(val)
      }
    }
  }
</script>

<style scoped>
  .content {
    padding: 2em;
  }

  .toolbar-box {
    border: 1px solid #20A0FF;
    background-color: #20A0FF;
    margin-top: 20px;
  }
</style>
